<script setup>
import { defineProps, defineEmits } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/userStore";

const props = defineProps({
    collapse: Boolean,
    headerLeft: String,
    userData: Object, // 接收用户数据
});

// 不要直接对collapse进行赋值，而是触发一个事件通知父组件进行状态改变
// 触发事件通知父组件更新 collapse 状态
const emits = defineEmits(["toggleCollapse"]);
function toggleCollapse() {
    emits("toggleCollapse");
}

// 路由跳转
const router = useRouter();
const userStore = useUserStore(); // 引入 Pinia 的用户状态管理

function handleButtonClick() {
    if (userStore.isLoggedIn) {
        // 登出
        userStore.logout();
        router.push("/login");
    } else {
        // 登录
        router.push("/login");
    }
}
</script>

<template>
    <!-- 然后在父组件中监听toggleCollapse这个事件并更新collapse状态 -->
    <el-icon @click="toggleCollapse" size="30" style="color: #545c64;">
        <component :is="headerLeft"></component>
    </el-icon>
    <!-- 显示欢迎信息 -->
    <div v-if="userData" class="userInfo">
        欢迎你{{ userData.role }}:{{ userData.name }}
    </div>
    <!-- 根据登录状态切换按钮 -->
    <el-button @click="handleButtonClick">
        {{ userData ? "登出" : "登录" }}
    </el-button>
</template>

<!-- 注意这里的style不能加scoped -->
<style lang="scss">
.userInfo {
    font-size: 16px;
    color: #545c64;
}
</style>
